<script src="/aifish/common/check.pjax.js"></script>
<article>
    <div class="toc-affix" style="width: 90px; height: 150px;">
        <div class="ant-affix" >
            <ul class="toc demos-anchor">
                <li><a href="#src-components-UserPanel-demo-primary">默认样式</a></li>
            </ul>
        </div>
    </div>
    <section class="markdown">
        <h1>TotalPanel统计面板</h1>
        <section class="markdown">
            <p></p>
            <h2 id="何时使用"><span>何时使用</span><a href="#何时使用" class="anchor">#</a></h2>
        </section>
        <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2></section>
    <div class="ant-row" style="margin-left: -8px; margin-right: -8px;">
        <div class="ant-col-24 code-boxes-col-2-1" style="padding-left: 8px; padding-right: 8px;">
            <section class="code-box expand" id="src-components-UserPanel-demo-primary">
                <section id="J_vue_4g5l7z4b1t6" class="code-box-demo">
                    <div>
<div class="row">
                <div class="col-sm-3 col-xs-6">
                  <div class="description-block border-right">
                    <span class="description-percentage text-green"><i class="fa fa-caret-up"></i> 17%</span>
                    <h5 class="description-header">$35,210.43</h5>
                    <span class="description-text">TOTAL REVENUE</span>
                  </div>
                  <!-- /.description-block -->
                </div>
                <!-- /.col -->
                <div class="col-sm-3 col-xs-6">
                  <div class="description-block border-right">
                    <span class="description-percentage text-yellow"><i class="fa fa-caret-left"></i> 0%</span>
                    <h5 class="description-header">$10,390.90</h5>
                    <span class="description-text">TOTAL COST</span>
                  </div>
                  <!-- /.description-block -->
                </div>
                <!-- /.col -->
                <div class="col-sm-3 col-xs-6">
                  <div class="description-block border-right">
                    <span class="description-percentage text-green"><i class="fa fa-caret-up"></i> 20%</span>
                    <h5 class="description-header">$24,813.53</h5>
                    <span class="description-text">TOTAL PROFIT</span>
                  </div>
                  <!-- /.description-block -->
                </div>
                <!-- /.col -->
                <div class="col-sm-3 col-xs-6">
                  <div class="description-block">
                    <span class="description-percentage text-red"><i class="fa fa-caret-down"></i> 18%</span>
                    <h5 class="description-header">1200</h5>
                    <span class="description-text">GOAL COMPLETIONS</span>
                  </div>
                  <!-- /.description-block -->
                </div>
              </div>
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title"><a href="#src-components-UserPanel-demo-primary">默认样式</a></div>
                    <div>
                         <p></p>
                    </div>
                    <span class="collapse anticon anticon-circle-o-right" ></span>
                </section>
                <section class="highlight-wrapper highlight-wrapper-expand">
                    <div class="highlight">
                        <pre class="language-xml">
<code >&lt;div class="row"&gt;<br />                &lt;div class="col-sm-3 col-xs-6"&gt;<br />                  &lt;div class="description-block border-right"&gt;<br />                    &lt;span class="description-percentage text-green"&gt;&lt;i class="fa fa-caret-up"&gt;&lt;/i&gt; 17%&lt;/span&gt;<br />                    &lt;h5 class="description-header"&gt;$35,210.43&lt;/h5&gt;<br />                    &lt;span class="description-text"&gt;TOTAL REVENUE&lt;/span&gt;<br />                  &lt;/div&gt;<br />                  &lt;!-- /.description-block --&gt;<br />                &lt;/div&gt;<br />                &lt;!-- /.col --&gt;<br />                &lt;div class="col-sm-3 col-xs-6"&gt;<br />                  &lt;div class="description-block border-right"&gt;<br />                    &lt;span class="description-percentage text-yellow"&gt;&lt;i class="fa fa-caret-left"&gt;&lt;/i&gt; 0%&lt;/span&gt;<br />                    &lt;h5 class="description-header"&gt;$10,390.90&lt;/h5&gt;<br />                    &lt;span class="description-text"&gt;TOTAL COST&lt;/span&gt;<br />                  &lt;/div&gt;<br />                  &lt;!-- /.description-block --&gt;<br />                &lt;/div&gt;<br />                &lt;!-- /.col --&gt;<br />                &lt;div class="col-sm-3 col-xs-6"&gt;<br />                  &lt;div class="description-block border-right"&gt;<br />                    &lt;span class="description-percentage text-green"&gt;&lt;i class="fa fa-caret-up"&gt;&lt;/i&gt; 20%&lt;/span&gt;<br />                    &lt;h5 class="description-header"&gt;$24,813.53&lt;/h5&gt;<br />                    &lt;span class="description-text"&gt;TOTAL PROFIT&lt;/span&gt;<br />                  &lt;/div&gt;<br />                  &lt;!-- /.description-block --&gt;<br />                &lt;/div&gt;<br />                &lt;!-- /.col --&gt;<br />                &lt;div class="col-sm-3 col-xs-6"&gt;<br />                  &lt;div class="description-block"&gt;<br />                    &lt;span class="description-percentage text-red"&gt;&lt;i class="fa fa-caret-down"&gt;&lt;/i&gt; 18%&lt;/span&gt;<br />                    &lt;h5 class="description-header"&gt;1200&lt;/h5&gt;<br />                    &lt;span class="description-text"&gt;GOAL COMPLETIONS&lt;/span&gt;<br />                  &lt;/div&gt;<br />                  &lt;!-- /.description-block --&gt;<br />                &lt;/div&gt;<br />              &lt;/div&gt;</code></pre>
                    </div>
                </section>
            </section>

        </div>
    </div>
</article>